---
# title: "User Select"
title: "用户选择"
# description: "Utilities for controlling whether the user can select text in an element."
description: "用于控制用户是否可以在元素中选择文本的功能类。"
features:
 responsive: true
 customizable: false
 hover: false
 focus: false
---

import plugin from 'tailwindcss/lib/plugins/userSelect'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Disable selecting text -->
## 禁用文本选择

<!-- Use `select-none` to prevent selecting text in an element and its children. -->
使用 `select-none` 来防止选择元素及其子元素中的文本。

```html amber
<template preview>
  <div class="mx-auto max-w-sm bg-amber-200 p-2 select-none text-center">
    This text is not selectable
  </div>
</template>

<div class="**select-none** ...">
  This text is not selectable
</div>
```

<!-- ## Allow selecting text -->

<!-- Use `select-text` to allow selecting text in an element and its children. -->
## 允许选择文本

使用 `select-text` 允许选择元素及其子元素中的文本。

```html emerald
<template preview>
  <div class="mx-auto max-w-sm bg-emerald-200 p-2 select-text text-center">
    This text is selectable
  </div>
</template>

<div class="**select-text** ...">
  This text is selectable
</div>
```

<!-- ## Select all text in one click

Use `select-all` to automatically select all the text in an element when a user clicks. -->
## 一键选择所有文本

使用 `select-all` 在用户点击时自动选择元素中的所有文本。

```html fuchsia
<template preview>
  <div class="mx-auto max-w-sm bg-fuchsia-200 p-2 select-all text-center">
    Click anywhere in this text to select it all
  </div>
</template>

<div class="**select-all** ...">
  Click anywhere in this text to select it all
</div>
```

<!-- ## Auto

Use `select-auto` to use the default browser behavior for selecting text. Useful for undoing other classes like `.select-none` at different breakpoints. -->
## 自动

使用 `select-auto` 来使用默认的浏览器行为来选择文本。对于撤销其他功能类（如 `.select-none`）在不同断点的行为时很有用。

```html lightBlue
<template preview>
  <div class="mx-auto max-w-sm bg-light-blue-200 p-2 select-auto text-center">
    This text is selectable
  </div>
</template>

<div class="**select-auto** ...">
  This text is selectable
</div>
```

<!-- ## Customizing -->
## 自定义

<!-- ### Variants -->
### 变体

<Variants plugin="userSelect" name="user-select" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="userSelect" name="user-select" />
